<template>
	<div class="classify">
		<header class="index-top layout border-b pos-fix full-width" style="top:0; z-index:999;">
			<div class="site">
				<!-- <span class="fs32 block bg-de" style='width:20px;height:20px;'></span> -->
				<!-- <i class="iconfont icon-xia fs24rem white"></i> -->
			</div>
			<div class="search-mask" @click="toSearch"></div>
			<search-bar class="flex_1" :autofocused="false"></search-bar>
		</header>
		<section class="brand-content layout-juscon pos-fix full-width full-height">
			<ul class="left-list bg-f5">
				<li class="align-center w100 pt15 pb15" :class="{ select : active == item.category_id  }" v-for="(item,index) in data" @click="goAnchor('#active' + index,item)">
					<p class="ellipsis fs14 c666">{{ item.category_name }}</p>
				</li>
			</ul>
			<ul class="flex_1 right-content" ref="content">
				<li v-for="(items,index) in data" :key="index" :id="'active' + index" class="full-width list">
					<ul class="flex_1 row pl5">
						<li class="col s4 mt15 pr5" v-for="(item,index) in items.children" :key="index" >
							<div class="align-center">
								<img class="responsive-img img-bg" style="height: 6rem;" :src="item.category_pic" alt="">
								<p >{{ item.category_name }}</p>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</section>
	</div>
</template>
<script>
	import SearchBar from '@/components/Search-bar';
	export default{
		components: {
			SearchBar,
		},
		data()
		{
			return{
				data 	: [],
				active 	: -1,
				scroll 	: '',
				pos     : 0,
			}
		},
		created()
		{
			this.loadData();
		},
		mounted() {
			window.addEventListener('scroll', this.dataScroll);
		},
		methods:
		{
			dataScroll() {
				this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
				if(this.scroll)
				{
					
				}
			},
			loadData()
			{
				this.$http.get('/category/appcategory').then(res=>{
					this.data = res.data;
				})
			},
			goAnchor(selector,item) {
				this.active = item.category_id;
				let that = this
				// var anchor = this.$el.querySelector(selector);
				// this.$refs.content.scrollTop = anchor.offsetTop - 40;
				let total = this.$el.querySelector(selector).offsetTop
        		let distance = this.$refs.content.scrollTop
        		let step = total / 50
				if (total > distance) {
		          	smoothDown()
		        } else {
		          	let newTotal = distance - total
		          	step = newTotal / 50
		          	smoothUp()
		        }
				function smoothDown () {
					if (distance < total) {
						distance += step
						that.$refs.content.scrollTop = distance - 40
						that.$refs.content.scrollTop = distance - 40
						setTimeout(smoothDown, 10)
					} else {
						that.$refs.content.scrollTop = total - 40
						that.$refs.content.scrollTop = total - 40
					}
				}
				function smoothUp () {
					if (distance > total) {
						distance -= step
						that.$refs.content.scrollTop = distance - 40
						that.$refs.content.scrollTop = distance - 40
						setTimeout(smoothUp, 10)
					} else {
						that.$refs.content.scrollTop = total - 40
						that.$refs.content.scrollTop = total - 40
					}
				}  
			},
			toSearch()
			{
				this.$router.push('/search');
			}
		}
	}
</script>

<style lang="less">
.classify{
	height: 100%;
	.select{
		background-color: #fff;
		p{
			border-left:2px solid #ff0036;
			font-weight: bold;
			color: #ff0036;
		}
	}
	.brand-content{
		overflow-y: scroll;
		.left-list{
			overflow-x: scroll; 
			padding: 45px 0;
			width: 5rem;
		}
		.right-content{
			overflow-y: scroll; 
			overflow-x: hidden;
			height: 40rem;
			padding: 45px 0;
		}
	}
}
</style>
